<template>
	<div>
		<toubu></toubu>
		<div>
			<!--左菜单部分-->
			<menulist></menulist>
			<!--右边图片部分-->
			<div class="right">
				<div class="headImg">
					<img class="pink" src="../assets/img/fenlei/pink.png" />
					<img class="mn" src="../assets/img/fenlei/mn.png" />
					<p class="huli">面部护理</p>
					<img class="hongxin" src="../assets/img/fenlei/hongxin.png" />
					<div class="quanbu">
						<p><a href="#/fenlei03">查看全部</a></p>
					</div>
				</div>
				<!--商品部分-->
				<div v-for="fenlei02 in 4" class="sp">
					<div class="jiemian01">
						<img src="../assets/img/fenlei/jiemian.png" />
						<p>洁面护理</p>
					</div>
					<div class="kouhong01">
						<img src="../assets/img/fenlei/kouh.png" />
						<p>人气口红</p>
					</div>
					<div class="baobao01">
						<img src="../assets/img/fenlei/bag.png" />
						<p>名牌包包</p>
					</div>
				</div>
			</div>

		</div>
		<dibu></dibu>
	</div>
</template>

<script>
	import toubu from '@/components/head'
	import dibu from '@/components/footer'
	import menulist from '@/components/menu'
	import $ from 'jquery'

	export default {
		components: {
			toubu,
			dibu,
			menulist
		},
		methods: {
			round: function() {
				$('.left ul li').click(function() {
					$(this).addClass('active').siblings("li").removeClass('active');
				});
			},
				
		},
		mounted: function() {
			this.round();
		}
	}
</script>

<style>
	
	.right {
		margin-top: 9.7rem;
		float: left;
	}
	
	.right .datu {
		width: 50.7rem;
		margin-left: 2rem;
		margin-top: 1.8rem;
	}
	
	.headImg {
		position: relative;
		width: 50rem;
		height: 20rem;
		margin-left: 2rem;
		margin-top: 1.7rem;
	}
	
	.pink {
		width: 100%;
	}
	
	.mn {
		width: 22.5rem;
		position: absolute;
		right: 0;
		bottom: 0;
	}
	
	.huli {
		font-size: 2.9rem;
		font-weight: 500;
		position: absolute;
		top: 5.8rem;
		left: 7.2rem;
	}
	
	.hongxin {
		position: absolute;
		width: 2rem;
		top: 9.5rem;
		left: 12rem;
	}
	
	.quanbu {
		position: absolute;
		left: 6.9rem;
		top: 11.8rem;
		background: white;
		width: 12rem;
		height: 3rem;
		border: 0.1px solid;
		box-shadow: 0.3rem 0.5rem 0 0 rgba(0, 0, 0, 0.2);
	}
	
	.quanbu p {
		font-size: 1.8rem;
		line-height: 3rem;
	}
	
	.sp {
		margin-left: 1rem;
	}
	
	.sp div {
		float: left;
		font-size: 2.4rem;
		margin-left: 2.3rem;
		margin-top: 4.5rem;
	}
	
	.jiemian01 img {
		width: 13.4rem;
		height: 10.8rem;
	}
	
	.kouhong01 img {
		width: 13.4rem;
		height: 10.8rem;
	}
	
	.baobao01 img {
		width: 13.4rem;
		height: 10.8rem;
	}
</style>